<!--
 * @Description: jQuery 学习
 * @Author: rendc
 * @Date: 2025-11-11 09:40:45
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-11 16:29:21
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery</title>
  <!-- 引入本地完整版jQuery -->
  <script src="./js/jquery.js"></script>
  <!-- 引入本地min版jQuery -->
  <!-- <script src="./js/jquery.min.js"></script> -->
  <!-- 引入cdn服务的完整版jQuery -->
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> -->
  <script>
    // jQuery使用
    $(document).ready(function(){
      // alert("hello,jQuery");
    })

    // 核心函数 $/jQuery
    // 当jQuery引用以后，就可以直接使用这两个函数
    // $(document)
    // jQuery()
    // 核心对象 $()
    // 使用 
  </script>
</head>
<body>
  <div>jQuery</div>
  <div class="div2">div2</div>
  <div class="div2">div2</div>
  <div class="div2">div2</div>
  <div id="div3">div3</div>
  <h2>表单</h2>
  用户名： <input type="text" id="username" onfocus="usernameInputFocus()"><br>
  <div id="textUsername" style="display: block; color: red;font-size: 12px;">请输入用户名</div>
  <button id="btn">确定</button>

</body>
<script>  
  // // js原生表单操作 
  // // 获取按钮 
  // var btn = document.getElementById("btn");
  // // var btn = document.getElementsByTagName("button")[0];
  // // 绑定点击事件
  // btn.onclick = function(){
  //   // console.log("btn被按下");
  //   // 表单校验 
  //   // 获取input的值
  //   var input = document.getElementById("username");
  //   // 获取输入框的值
  //   var userName = input.value;
  //   var text;
  //   console.log('🤡 CC - userName:', userName);
  //   // console.log('🤡 CC - userName.length:', userName.length);
  //   if (userName == "") {
  //     console.log("用户名不能为空");
  //     document.getElementById("textUsername").style.display = "block";
  //     text = "用户名不能为空";
  //   }else if(userName.length < 2){
  //     console.log("用户名长度不能小于2个字");
  //     document.getElementById("textUsername").style.display = "block";
  //     text = "用户名长度不能小于2个字";
  //   }else{
  //     console.log("通过表单校验");
  //   }
  //   document.getElementById("textUsername").innerText = text;
  // }
  // function usernameInputFocus() {
  //     document.getElementById("textUsername").style.display = "none";
  // }
  // jQuery操作表单
  // 获取按钮 
  var btn = document.getElementById("btn");
  var btn = $("#btn");
  console.log('🤡 CC - btn:', btn);
  btn.click(btnClickEvent);
  // 绑定点击事件
  function btnClickEvent(){
    // 表单校验 
    // 获取input的值
    var input = $("#username");
    // 获取输入框的值
    // var userName = input.value;
    var userName = input.val();
    var text;
    console.log('🤡 CC - userName:', userName);
    // console.log('🤡 CC - userName.length:', userName.length);
    if (userName == "") {
      console.log("用户名不能为空");
      // document.getElementById("textUsername").style.display = "block";
      $("#textUsername").css({
        display : "block",
      });
      text = "用户名不能为空";
    }else if(userName.length < 2){
      console.log("用户名长度不能小于2个字");
      $("#textUsername").css({
        display : "block",
      });
      text = "用户名长度不能小于2个字";
    }else{
      console.log("通过表单校验");
    }
    // document.getElementById("textUsername").innerText = text;
    // console.log('🤡 CC - btnClickEvent - text:', text);
    $("#textUsername")[0].text() = text;
    // console.log(`🤡 CC - btnClickEvent - $("#textUsername"):`, $("#textUsername"));
  }
  function usernameInputFocus() {
      document.getElementById("textUsername").style.display = "none";
  }

  // js原生
  var div1 = document.getElementsByTagName("div")[0];
  var div3 = document.getElementById("div3");
  // console.log('🤡 CC - div1:', div1);
  // console.log('🤡 CC - div3:', div3);
  div1.style.backgroundColor = "red";
  div1.style.color = "white";
  div1.style.fontSize = "12px";
  // jQuery 
  var $div1 = $('div:first');
  var $div2 = $('.div2');
  var $div3 = $('#div3');
  // console.log('🤡 CC -  $div1:',  $div1);
  // console.log('🤡 CC -  $div2:',  $div2);
  // console.log('🤡 CC -  $div3:',  $div3);
  $div1.css({
    backgroundColor:"yellow",
    color:"green",
    fontSize:"20px"
  });

</script>
</html>